<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:replace="librarian/common :: head"></th:block>
<body>
<div class="container-scroller">
    <!-- partial:../../partials/_navbar.html -->

    <div th:replace="librarian/common :: navbar"></div>

    <!-- partial -->
    <div class="container-fluid page-body-wrapper">
        <div class="row row-offcanvas row-offcanvas-right">
            <!-- partial:../../partials/_sidebar.html -->
            <th:block th:replace="librarian/common :: sidebar"></th:block>

            <div class="content-wrapper">
                <header class="page-header">
                    <div class="container-fluid">
                        <h2 class="no-margin-bottom">Post News Add</h2>
                    </div>
                </header>
                <section class="forms">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-close">
                            </div>
                            <div class="card-body">
                                <div class="form-horizontal">
                                    <div class="form-group row">
                                        <label class="col-sm-3 form-control-label">Title</label>

                                        <input id="title" type="text" class="form-control"
                                               placeholder="Please enter the title">
                                    </div>
                                </div>
                                <div class="line"></div>
                                <div class="form-group row">
                                    <label for="exampleTextarea1" class="col-sm-3 form-control-label">Content</label>
                                    <textarea class="form-control" id="content" rows="20"
                                              placeholder="Please enter the content"></textarea>
                                    <!-- <label class="col-sm-3 form-control-label">Content</label>
                                    <div class="col-sm-9">
                                        <input id="content" type="text" class="form-control" >small class="help-block-none">A block of help text that breaks onto a new line and may extend beyond one line.</small -->
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-sm-4 offset-sm-3">
                                    <button class="btn btn-secondary" onclick="cancelEdit()">Clear</button>
                                    <button id="submit" class="btn btn-primary" onclick="submitNewPost()">Submit
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
        </section>

    </div>
    <!-- content-wrapper ends -->
    <!-- partial:../../partials/_footer.html -->

    <div th:replace="librarian/common :: footer"></div>

    <!-- partial -->
</div>
<!-- row-offcanvas ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->

<!-- plugins:js -->

<div th:replace="librarian/common :: scripts"></div>
<script>
    function submitNewPost() {
        var formData = new FormData();
        formData.append("title", $("#title").val());
        formData.append("content", $("#content").val());

        $.ajax({
            url: "/api/news/",
            type: "POST",
            dataType: "json",
            data: formData,
            processData: false,
            contentType: false,
            success: function (resp) {
                alertSuccess("this news was posted");
            },
            error: function (resp) {
                alertError(resp.responseJSON.message);
            }
        });
    }


    function cancelEdit() {
        $("#title").val("");
        $("#content").val("");
    }
</script>

</body>

</html>
